<template>
    <div style="padding: 40px;">
        <el-button style="margin-bottom: 30px;" @click="dialogVisible = true" type="primary">授权店铺</el-button>
        <el-dialog
        destroy-on-close="true"
  :visible.sync="dialogVisible"
  width="60%"
  :before-close="handleClose">
  <h5 style="margin-bottom: 30px; color: #0d1d2d;">授权店铺</h5>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
    <el-form-item label="店铺名称" prop="name">

        <template slot="label">
            <el-tooltip class="item" effect="dark" content="建议与开设的平台保持一致" placement="top-start">
                <span> 店铺名称 <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>

    
  <el-form-item label="Client_id" prop="clientId">

    <template slot="label">
            <el-tooltip class="item" effect="dark" content="如何获取？登录ozon商家后台-点头像-设置-API密钥-Client_ID" placement="top-start">
                <span> Client_id <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>

    <el-input v-model="ruleForm.clientId"></el-input>
  </el-form-item>
  <el-form-item label="API密钥" prop="apiKey">
    <template slot="label">
            <el-tooltip class="item" effect="dark" content="如何获取？登录ozon商家后台-点头像-设置-API密钥-生成密钥-身份选择管理员" placement="top-start">
                <span> API密钥 <i class="el-icon-question"></i></span>

    </el-tooltip>
        </template>

    <el-input v-model="ruleForm.apiKey"></el-input>
  </el-form-item>
  <el-form-item label="卖家识别号" prop="sellerId">
    <el-input v-model="ruleForm.sellerId"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer">
    <!-- <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" >确 定</el-button> -->
  </span>
</el-dialog>

   
<el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="name"
      label="店铺名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="clientId"
      label="clientId"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="创建时间">
    </el-table-column>
    <el-table-column
      prop="updateTime"
      label="修改时间">
    </el-table-column>
    <el-table-column
      prop="createBy"
      label="创建用户">
    </el-table-column>
  </el-table>
<div style="display: flex; justify-content:center; margin:20px auto;"> 
    <el-pagination
  background
  @current-change="ddd"
  layout="prev, pager, next"
  :total="ttt">
</el-pagination>
</div>
</div>
  </template>
  
  <script>
  import {shouquan,getShouquan} from '../../../api/login'
  export default {
    data() {
      return {
        dialogVisible: false,
        ruleForm: {
          name: '',
          clientId: '',
          apiKey: '',
          sellerId: '',
      
        },
      ti:{
        pageNum:1,
        pageSize:4,
      },
      tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        rules: {
          name: [
            { required: true, message: '请输入店铺名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          clientId: [
            { required: true, message: '请输入clientId', trigger: 'change' }
          ],
          apiKey: [
          { required: true, message: '请输入apiKey', trigger: 'change' }
          ],
          sellerId: [
          { required: true, message: '请输入sellerId', trigger: 'change' },
          { validator: this.validateSellerId, trigger: 'change' }
          ],
        
        }
      };
    },
    created(){
        this.getquan()
    },
    methods: {
ddd(e){
    this.ti.pageNum=e},

       async getquan(){
           const data= await getShouquan(this.ti)
           console.log(data);
           this.tableData=data.rows
           this.ttt=data.total
        },
        validateSellerId(rule, value, callback) {
    if (!value) {
      callback(new Error('请输入sellerId'));
    } else if (!/^\d+$/.test(value)) {
      callback(new Error('sellerId必须为数字'));
    } else {
      callback();
    }
  },
        handleClose(done) {
            this. ruleForm= {
          name: '',
          clientId: '',
          apiKey: '',
          sellerId: null,
      
        }
        done()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.ruleForm.sellerId=this.ruleForm.sellerId-0
            shouquan(this.ruleForm)
           this.dialogVisible=false
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
  
  <style>
  
  </style>